<script lang="ts" setup>
import { ref } from "vue"
import type { TabsPaneContext } from 'element-plus'
import quantity from "./quantity/index.vue"
import visa from "./visa/index.vue"



//#region tab
const activeName = ref('start')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//#endregion


</script>

<template>
  <div class="app-container">
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="工程量计量文件管理" name="start"></el-tab-pane>
    <el-tab-pane label="现场签证及见证记录管理" name="suspend"></el-tab-pane>
  </el-tabs>
  <template v-if="activeName == 'start'">
    <quantity></quantity>
  </template>
  <template v-else>
    <visa></visa>
  </template>
  </div>
</template>

<style lang="scss" scoped>
.app-container{
  background: #FFF;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
